<template>
  <div class="setting-main">
    <!-- 账户信息 -->
    <div class="common-style">
      <AccountInfo></AccountInfo>
    </div>
    <!-- 默认机器人选择 -->
    <!-- <div class="common-style">
      <RobotDefault></RobotDefault>
    </div> -->
    <div class="common-style">
      <Topic />
    </div>
    <!-- 退出登录/注销账号 -->
    <div class="common-style">
      <el-descriptions :column="1">
        <el-descriptions-item align="center"><el-button type="primary" round
            @click="logout">退出登录</el-button></el-descriptions-item>
        <el-descriptions-item align="center"><el-button type="danger" round
            @click="handleDeleteAllSession">删除所有聊天</el-button></el-descriptions-item>
        <el-descriptions-item align="center"><el-button type="danger" round>注销账号</el-button></el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 网站使用协议 -->
    <div class="common-style">
      <el-descriptions>
        <el-descriptions-item align="center">
          <el-link :underline="false" type="primary">关于</el-link>
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <el-link :underline="false" type="primary">隐私协议</el-link>
        </el-descriptions-item>
      </el-descriptions>
    </div>

  </div>
</template>

<script setup>
import { ref } from "vue"
import AccountInfo from "./AccountInfo.vue";
import RobotDefault from "./RobotDefault.vue";
import Topic from "./Topic.vue";
import { useAuthStore } from "@/stores/auth";
import { clearAllSession } from "@/api/session";

const authStore = useAuthStore();

// 退出登录
const logout = () => {
  authStore.clear()
  // localStorage.removeItem("token");
  window.location.href = "/";
}

const handleDeleteAllSession = () => {
  // authStore.clearSession();
  clearAllSession({ uid: authStore.user.id }).then(res => {
    // if(res.state )
    setTimeout(() => {
      window.location.reload();
    }, 500)
  })
}
</script>

<style lang="scss" scoped>
.setting-main {
  width: 50vw;
}

.common-style {
  margin: 1rem 0;
}
</style>
